import React, { useEffect, useMemo, useState } from 'react';
import { Map, Marker, Markers } from 'react-amap';
import { RollbackOutlined } from '@ant-design/icons';
import Geolocation from 'react-amap-plugin-geolocation';
import IconFont from '@/components/IconFont';
import {
  Row,
  Col,
  Card,
  Button,
  Progress,
  Select,
  DatePicker,
  message,
  Tooltip,
  Badge,
  Modal,
} from 'antd';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';

function qc(arr) {
  var resultObj = {};
  var obj = {};
  arr.forEach((v, k) => {
    if (obj[v.same]) {
      obj[v.same]++;
    } else {
      obj[v.same] = 1;
    }
  });
  resultObj.obj = obj;
  return resultObj;
}

const MapGD = ({ centercur }) => {
  const [center, setcenter] = useState(centercur);

  let { data, loading } = useRequest(() => {
    return getFetch({ url: '/vehicle-api/monitor/map_monitor_list_v2' });
  });

  let renderCluserMarker = (context, imgpath, color) => {
    // 聚合中点个数
    var clusterCount = context.count,
      count = context.markers.length;

    var div = document.createElement('div');
    // 聚合点配色
    var defaultColor = ['204,235,197', '168,221,181', '123,204,196', '78,179,211', '43,140,190'],
      bgColor;
    if (clusterCount >= 0 && clusterCount < 10) {
      bgColor = defaultColor[0];
    } else if (clusterCount >= 10 && clusterCount < 100) {
      bgColor = defaultColor[1];
    } else if (clusterCount >= 100 && clusterCount < 1000) {
      bgColor = defaultColor[2];
    } else if (clusterCount >= 1000 && clusterCount < 10000) {
      bgColor = defaultColor[3];
    } else if (clusterCount >= 10000) {
      bgColor = defaultColor[4];
    }

    let allcount = context.markers
      .map((it) => {
        let cur = it.getExtData() ?? {};
        return cur?.un_handle_amount ?? 0;
      })
      .reduce((prev, next) => {
        return prev + next;
      });

    var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40);
    div.style.width = '65px';
    div.style.height = '35px';
    div.innerHTML = `
        <div style="display:flex;flex-direction:column;height:35px;padding:2px 0 0 0">
          <b style="height:14px;line-height: 14px;color:#ff4800">${allcount}</b>
          <div style="width:100%;height:1px;background:${color};margin:1px 0px 0px 0px"></div>
          <b style="height:14px;line-height: 14px;">${context.count}</b>
        </div>
    `;
    div.style.lineHeight = size + 'px';
    div.style.color = '#333';
    div.style.fontSize = '12px';
    div.style.textAlign = 'center';
    div.style.backgroundImage = `url(${require('@/assets/' + imgpath)})`;
    div.setAttribute('class', allcount > 0 ? 'danger' : 'active');

    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
    context.marker.setContent(div);
  };

  let markers = useMemo(() => {
    let { finger_print, rfid, lift, fire_control } = data?.data ?? {};

    let fingermarkers = finger_print ?? [],
      rfidmarkers = rfid ?? [],
      firemarkers = fire_control ?? [],
      liftmarkers = lift ?? [];

    let finger = {
      useCluster: {
        minClusterSize: 1,
        gridSize: 60,
        renderCluserMarker: (context) => renderCluserMarker(context, 'icon_fig.png', '#dc7c1e'),
      },
      markers: fingermarkers.map((it) => ({
        position: {
          longitude: it.lng,
          latitude: it.lat,
        },
        amount: it?.amount,
        myIndex: 1,
        un_handle_amount: it?.un_handle_amount,
      })),
      render: (extData) => {
        return (
          <div>
            <div style={{ position: 'relative' }}>
              <Tooltip title="电器指纹报警">
                <IconFont
                  type="icon-dingwei"
                  className="warning"
                  style={{ color: '#dc7c1e', fontSize: 36 }}
                />
                <span
                  style={{
                    width: '100%',
                    textAlign: 'center',
                    color: extData.un_handle_amount > 0 ? '#fff' : '#ddd',
                    position: 'absolute',
                    top: 4,
                    left: 0,
                  }}
                >
                  {extData.un_handle_amount}
                </span>
              </Tooltip>
            </div>
          </div>
        );
      },
    },
      lifter = {
        useCluster: {
          minClusterSize: 1,
          gridSize: 60,
          renderCluserMarker: (context) => renderCluserMarker(context, 'icon_lift.png', '#434fc5'),
        },
        markers: liftmarkers.map((it) => ({
          position: {
            longitude: it.lng,
            latitude: it.lat,
          },
          amount: it?.amount,
          myIndex: 1,
          un_handle_amount: it?.un_handle_amount,
        })),
        render: (extData) => {
          return (
            <div style={{ position: 'relative' }}>
              <Tooltip title="电梯识别报警">
                <IconFont
                  type="icon-dingwei"
                  className="warning"
                  style={{ color: '#434fc5', fontSize: 36 }}
                />
                <span
                  style={{
                    width: '100%',
                    textAlign: 'center',
                    color: extData.un_handle_amount > 0 ? '#fff' : '#ddd',
                    position: 'absolute',
                    top: 4,
                    left: 0,
                  }}
                >
                  {extData.un_handle_amount}
                </span>
              </Tooltip>
            </div>
          );
        },
      },
      firer = {
        useCluster: {
          minClusterSize: 1,
          gridSize: 60,
          renderCluserMarker: (context) => renderCluserMarker(context, 'icon_cd.png', '#078fdd'),
        },
        markers: firemarkers.map((it) => ({
          position: {
            longitude: it.lng,
            latitude: it.lat,
          },
          amount: it?.amount,
          myIndex: 1,
          un_handle_amount: it?.un_handle_amount,
        })),
        render: (extData) => {
          return (
            <div style={{ position: 'relative' }}>
              <Tooltip title="集充消防报警">
                <IconFont
                  type="icon-dingwei"
                  className="warning"
                  style={{ color: '#078fdd', fontSize: 36 }}
                />
                <span
                  style={{
                    width: '100%',
                    textAlign: 'center',
                    color: extData.un_handle_amount > 0 ? '#fff' : '#ddd',
                    position: 'absolute',
                    top: 4,
                    left: 0,
                  }}
                >
                  {extData.un_handle_amount}
                </span>
              </Tooltip>
            </div>
          );
        },
      },
      rfider = {
        useCluster: {
          minClusterSize: 1,
          gridSize: 60,
          renderCluserMarker: (context) => renderCluserMarker(context, 'icon_rfid.png', '#06b491'),
        },
        markers: rfidmarkers.map((it) => ({
          position: {
            longitude: it.lng,
            latitude: it.lat,
          },
          amount: it?.amount,
          myIndex: 1,
          un_handle_amount: it?.un_handle_amount,
        })),
        render: (extData) => {
          return (
            <div>
              <div style={{ position: 'relative' }}>
                <Tooltip title="RFID标签报警">
                  <IconFont
                    type="icon-dingwei"
                    className="warning"
                    style={{ color: '#06b491', fontSize: 36 }}
                  />
                  <span
                    style={{
                      width: '100%',
                      textAlign: 'center',
                      color: extData.un_handle_amount > 0 ? '#fff' : '#ddd',
                      position: 'absolute',
                      top: 4,
                      left: 0,
                    }}
                  >
                    {extData.un_handle_amount}
                  </span>
                </Tooltip>
              </div>
            </div>
          );
        },
      };

    return {
      finger,
      lifter,
      firer,
      rfider,

      finger_print,
      rfid,
      lift,
      fire_control,
    };
  }, [data]);

  useEffect(() => {
    setcenter(centercur)
  }, [centercur])

  return (
    <Map
      center={center}
      pitch={60}
      viewMode="3D"
      mapStyle="amap://styles/light"
      zoom={17}
      style={{ position: 'relative' }}
      rotation={15}
    >
      <Markers {...markers.finger} />
      <Markers {...markers.lifter} />
      <Markers {...markers.firer} />
      <Markers {...markers.rfider} />

      <div style={{ position: 'absolute', left: 12, top: 12 }}>
        <b style={{ fontSize: 20 }}>地图实时报警展示</b>
      </div>

      <div
        style={{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          height: 48,
          backgroundColor: 'rgba(255,255,255,0.5)',
          zIndex: 100,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          overflow: 'hidden',
          userSelect: 'none',
        }}
      >
        <div className="center" style={{ padding: 6, flex: 1 }}>
          <img src={require('@/assets/icon_rfid.png')} alt="" style={{ width: 48 }} />
          <span style={{ paddingLeft: 6 }}>RFID标签报警</span>
          {/*<div className="columns" style={{ paddingLeft: 12 }}>
            
             <span>报警总数:{markers.rfid?.amount}</span>
            <span>
              未处理数量:<b style={{ color: '#ff4800' }}>{markers.rfid?.un_handle}</b>
            </span> 
          </div>*/}
        </div>
        <div className="center" style={{ padding: 6, flex: 1 }}>
          <img src={require('@/assets/icon_fig.png')} alt="" style={{ width: 48 }} />
          <span style={{ paddingLeft: 6 }}>电器指纹报警</span>
          {/*  */}
          {/*<div className="columns" style={{ paddingLeft: 12 }}>
             <span>报警总数:{markers.finger_print?.amount}</span>
            <span>
              未处理数量:<b style={{ color: '#ff4800' }}>{markers.finger_print?.un_handle}</b>
            </span> 
          </div>*/}
        </div>

        <div className="center" style={{ padding: 6, flex: 1 }}>
          <img src={require('@/assets/icon_lift.png')} alt="" style={{ width: 48 }} />
          <span style={{ paddingLeft: 6 }}>电梯识别报警</span>
          {/*  */}
          {/*<div className="columns" style={{ paddingLeft: 12 }}>
             <span>报警总数:{markers.lift?.amount}</span>
            <span>
              未处理数量:<b style={{ color: '#ff4800' }}>{markers.lift?.un_handle}</b>
            </span> 
          </div>*/}
        </div>

        <div className="center" style={{ padding: 6, flex: 1 }}>
          <img src={require('@/assets/icon_cd.png')} alt="" style={{ width: 48 }} />
          <span style={{ paddingLeft: 6 }}>集充消防报警</span>
          {/*  */}
          {/*<div className="columns" >
             <span>报警总数:{markers.fire_control?.amount}</span>
            <span>
              未处理数量:<b style={{ color: '#ff4800' }}>{markers.fire_control?.un_handle}</b>
            </span> 
          </div>*/}
        </div>
      </div>

      <Button
        style={{ cursor: 'pointer' }}
        type="primary"
        onClick={() => {
          setcenter({ longitude: 114.053622, latitude: 22.560047 });
        }}
        icon={<RollbackOutlined />}
        // eslint-disable-next-line react/jsx-no-duplicate-props
        style={{ position: 'absolute', right: 12, top: 12 }}
      />
    </Map>
  );
};

export default MapGD;
